import React from 'react';
import {
    View,
    FlatList,
    Text,
    BackHandler,
    RefreshControl
} from 'react-native';
import {NavigationActions,SafeAreaView} from 'react-navigation';
import {connect} from 'react-redux';
import actions from '../../action';
import NavigationUtil from '../../navigator/NavigationUtil';
import styles from './style/App';
// ------------------------------------
import SwiperView from './SwiperView';
import MenuView from './MenuView';
import RecommendView from './RecommendView';
import LoanListItem from '../../components/LoanListItem';
import {Toast} from '../../components/Toast';
import color from '../../public/widget/color';
import BackPressComponent from '../../components/BackPressComponent';
class HomePage extends React.Component {
    constructor(props){
        super(props);
        this.backPress = new BackPressComponent({backPress: this.onBackPress});
        this.storeName = 'HomeloanDatas'+'lessloan';
    }
    componentDidMount(){
        this.backPress.componentDidMount();;//监听返回键
        this.loadData();
    }
    componentWillUnmount(){
        this.backPress.componentWillUnmount(); //移除监听
    }
    /**
     * 处理 Android 中物理返回键
     */
    onBackPress =()=>{
        const {dispatch,nav} = this.props;
        if(nav.routes[1].index === 0){
            return false;
        }
        dispatch(NavigationActions.back());
        return true;
    }
    // 加载数据
    loadData= (needRefresh)=>{
        let {getLoanData} = this.props
        getLoanData(this.storeName,{ //异步获取数据
            loantype:"lessloan",
            ref_customer_id:2
        },needRefresh)
    }
    /**
     * 获取与当前页面有关的数据
     * @returns {*}
     * @private
     */
    _store() {
        const {loanDataList} = this.props;
        let store = loanDataList[this.storeName];
        if (!store) {
            store = {
                applyData:{},//今日推荐
                isLoading: false,
                projectModels: [],//要显示的数据
            }
        }
        return store;
    }
    // 菜单分类
    _onLoantypeChange = (name,type)=>{
        let {navigation,onLoanChange} = this.props
        if(!type){
            Toast.show('此模块还没有开放')
            return;
        }
        NavigationUtil.goPage({navigation},'LoanTypePage')
        onLoanChange({name,type})
    }
    // 头部信息
    renderHeader = (store)=>{
        return (
            <View>
                <SwiperView></SwiperView>
                <MenuView onLoantypeChange={this._onLoantypeChange}></MenuView>
                <Text style={styles.Text}>今日推荐</Text>
                <RecommendView applyData={store.applyData}></RecommendView>
                <Text style={styles.hotText}>热门推荐</Text>
                {store.isLoading ? <View style={styles.nulldatas}><Text style={{textAlign:'center'}}>加载中</Text></View> : null}
                <LoanListItem/>
            </View>
        )
    }
    render() {
        let store = this._store();
        return  (
            <SafeAreaView style={styles.container}>
                 <FlatList
                    data={store.projectModels}
                    renderItem={(info,i)=>{
                        return (
                            //  <LoanListItem infoData={info} key={i}/>
                            i==1 ? <LoanListItem/> : null
                        )
                    }}
                    keyExtractor={(item, index) => {
                        return index.toString()
                    }}
                    ListHeaderComponent={this.renderHeader(store)}
                    refreshControl={
                        <RefreshControl
                            title={'正在加载'}
                            refreshing={store.isLoading}
                            onRefresh={() => this.loadData(true)}
                            titleColor={color.blackColor}
                            colors={[color.blackColor]}
                            tintColor={color.blackColor}
                        />
                    }
                /> 
            </SafeAreaView>)
    }
}

const mapStateToProps = state =>({
    nav:state.nav,
    loanDataList:state.loanDataList
});
const mapDispatchToProps = dispatch => ({
    onLoanChange:loadtype=>dispatch(actions.onLoanChange(loadtype)),
    getLoanData:(storeName,data,needRefresh)=>dispatch(actions.getLoanData(storeName,data,needRefresh))
})
export default connect(mapStateToProps,mapDispatchToProps)(HomePage);
